<!-- 创建时间: 2022年01月01日 星期六 19:30 -->
<template>
    <!-- 支付生成组件 -->
    <div class='paymentCreate_container'>
        <span v-if="paymentImgCode==''" style="color: darkgray;">暂无数据</span>
        <div v-if="paymentImgCode!=''">
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div class="grid-content bg-purple"> ¥&nbsp;{{tableData[0].payPrice}} </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div class="grid-content bg-purple">
                        <el-image style="width: 250px; height: 250px" :src="paymentImgCode" fit="none"></el-image>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="" justify="center">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <div class="grid-content bg-purple" style="text-align: center;">
                        <span> {{calcExpireSecond}}&nbsp;秒 </span>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
                <el-col>
                    <div class="grid-content bg-purple">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="user" label="用户">
                            </el-table-column>
                            <el-table-column prop="payPrice" label="价格">
                            </el-table-column>
                            <el-table-column prop="UUID" label="单号">
                            </el-table-column>
                            <el-table-column prop="createDate" label="创建日期">
                            </el-table-column>
                            <el-table-column prop="expireDate" label="过期日期">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import dayjs from "dayjs";
import md5 from "js-md5";

export default {
    // 获取父组件传入的商品订单、总价
    props: ["selectCommodity"],
    data() {
        //这里存放数据
        return {
            paymentImgCode: '',
            UUID: '',
            tableData: [{}],
            calcExpireSecond: '',
            interval: null,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        /**
         * 父组件调用该方法--请求支付码
         */
        confirmPay() {
            let order = {
                // 创新日期时间
                createDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
                // 过期分钟
                expireMinutes: 10,
                // 订单数据
                data: JSON.parse(JSON.stringify(this.selectCommodity)),
            };

            // 哈希标识码
            let hashCode = md5(JSON.stringify(order));

            this.$axios.post('/', { order: JSON.stringify(order), hashCode }).then(res => {
                if(res.data.status==601) {
                    alert(res.data.errMsg);
                    return;
                };
                this.paymentImgCode = res.data.body.img;
                this.UUID = res.data.body.UUID;
                this.tableData = [{
                    user: 'xxx',
                    payPrice: res.data.body.payPrice,
                    UUID: res.data.body.UUID,
                    createDate: order.createDate,
                    expireDate: dayjs(order.createDate).add(order.expireMinutes, 'minute').format("YYYY-MM-DD HH:mm:ss")
                }]
                clearInterval(this.interval)
                this.timeDiff(this.tableData[0].expireDate, "second", res => {
                    this.calcExpireSecond = res;
                });
            })

        },
        /**
         * targetTime 计算目标时间与当前时间的差值
         * unit 差异单位，默认second。[year,hour，minute，second，millisecond]
         */
        timeDiff(targetTime, unit, result) {
            let uniter = unit != '' || unit != null || unit != undefined ? unit : 'second';
            this.interval = setInterval(() => {
                let num = dayjs(targetTime).diff(dayjs(), uniter);
                result(num);
                if (num <= 0) {
                    clearInterval(this.interval)
                }
            }, 1000);
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）2022-01-04 20:05:00
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.paymentCreate_container {
    .row-bg,
    .totalPrice {
        text-align: center;
        font-size: 33px;
    }
}
</style>